<template>
  <div class="personal container">
    <div class="p-top">
      <div class="p-bg" ref="bg" @click="uploadBgFile">
        <input type="file" ref="uploadBgFile" style="display: none" />
        <button class="upload">
          <Icon type="ios-camera-outline" />
          <span>上传封面图片</span>
        </button>
      </div>
      <div class="p-msg">
        <div class="avatar">
          <input type="file" ref="avatarFile" style="display: none" />
          <div class="modal" @click="uploadAvatarFile">
            <Icon class="camera" type="ios-camera-outline" />
            <p>修改我的头像</p>
          </div>
          <img ref="avatarImg" src="@/assets/images/avatar.jpg" alt="" />
        </div>
        <div class="msg">
          <h2 class="username">黄程</h2>
        </div>
        <div class="data-msg">
          <div class="check-msg">
            <Icon type="ios-arrow-down" />
            <span>查看详细资料</span>
          </div>
          <div class="edit-msg">
            <button class="edit-btn">编辑个人资料</button>
          </div>
        </div>
      </div>
    </div>
    <div class="person-detail">
      <div class="left">
        <ul class="head-list-person">
          <button
            v-for="(item, index) in personHeadItems"
            :key="index"
            :class="{ 'person-active': isClickIndex === index }"
            @click="itemClick(index)"
          >
            <router-link :to="{ name: item.route }"
              >{{ item.name }} {{ listsCount[index] }}</router-link
            >
          </button>
        </ul>
        <router-view></router-view>
      </div>
      <div class="right">
        <ul class="create-center">
          <li class="item">
            <img
              src="https://static.zhihu.com/heifetz/assets/creator_entrance.a883e0a5.png"
              alt=""
            />
            <span>创作中心</span>
          </li>
          <li class="item">
            <a href="#">去开通</a>
            <Icon type="ios-arrow-forward" />
          </li>
        </ul>
        <ul class="foucs-person">
          <li class="foucs-item">
            <a href="#">
              <p class="focused">关注了</p>
              <p class="foucs-count">0</p>
            </a>
          </li>
          <li class="foucs-item">
            <a href="#">
              <p class="focused">关注者</p>
              <p class="foucs-count">0</p>
            </a>
          </li>
        </ul>
        <ul class="focus-details">
          <li class="item">
            <span class="word">关注的话题</span>
            <span class="count">0</span>
          </li>
          <li class="item">
            <span class="word">关注的专栏</span>
            <span class="count">0</span>
          </li>
          <li class="item">
            <span class="word">关注的问题</span>
            <span class="count">0</span>
          </li>
          <li class="item">
            <span class="word">关注的收藏</span>
            <span class="count">0</span>
          </li>
          <li class="item">
            <span class="times">个人主页被浏览 168次</span>
          </li>
        </ul>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, iure sapiente quidem nostrum voluptatum incidunt consectetur aperiam aliquam velit, amet quibusdam ratione assumenda hic harum tempore ullam. Explicabo officiis, quae hic ipsa voluptatem iste consequatur beatae inventore, impedit molestiae delectus a? Animi, iure officiis. Animi dolorem hic nostrum molestiae cupiditate itaque repellat esse vitae, tempora quibusdam quam adipisci eius eveniet, asperiores ex mollitia eaque at molestias impedit sed dolore illum eligendi. Neque iste reprehenderit officia odio, nemo sed tempore corrupti libero adipisci voluptas cupiditate ducimus esse reiciendis similique aliquid sapiente veritatis ratione porro. Quo maxime corrupti, recusandae id maiores molestiae.
      </div>
    </div>
  </div>
</template>

<script>
import axios, { baseURL } from "@/util/axios";
import CreateCenter from "@/components/main/CreateCenter";
import {getSessionStorage, setSessionStorage} from '@/common/utils'
export default {
  name: "Personal",
  data() {
    return {
      isClickIndex: 0,
      personHeadItems: [
        { name: "动态", route: "active" },
        { name: "回答", route: "answer" },
        { name: "视频", route: "video" },
        { name: "提问", route: "putup" },
        { name: "文章", route: "article" },
        { name: "专栏", route: "special" },
        { name: "想法", route: "idea" },
        { name: "收藏", route: "collection" },
        { name: "关注", route: "focus2" },
      ],
      listsCount: [null, 0, 0, 0, 0, 0, 0, 0, null],
    };
  },
  async created() {
    // 获取回答的数量
    const res = await axios.get('/fav/countMyFav', {params: {user_id: '6'}})
    if (res.code == 1) {
      this.$set(this.listsCount, 7, res.data);
    }
    let index = getSessionStorage('userListIndexActive')
    if (index = +index) {
      this.isClickIndex = index;
      this.$bus.$emit('getCollectionCount', index)
    }
  },
  mounted() {
    // 取出图片,如果有，进行初始化
    let avImg = localStorage.getItem("avatarImg");
    let bgImg = localStorage.getItem("bgImg");
    avImg && (this.$refs.avatarImg.src = avImg);
    const bg = this.$refs.bg;
    bg.style.backgroundImage = `url(${bgImg})`;
    bg.style.height = "25rem";
  },
  methods: {
    // 上传头像
    uploadAvatarFile() {
      this.uploadFile(this.$refs.avatarFile, (res) => {
        let src = "http://localhost:3000" + "/" + res.photo.path.slice(14);
        localStorage.setItem("avatarImg", src);
        this.$refs.avatarImg.src = src;
      });
    },
    // 上传背景图片
    uploadBgFile() {
      this.uploadFile(this.$refs.uploadBgFile, (res) => {
        const bg = this.$refs.bg;
        console.log(bg, res);
        let src = "http://localhost:3000" + "/" + res.photo.path.slice(14);
        localStorage.setItem("bgImg", src);
        console.log(src);
        bg.style.backgroundImage = `url(${src})`;
        bg.style.height = "25rem";
      });
    },
    // 上传文件
    uploadFile(ele, callback) {
      ele.click();
      ele.onchange = (e) => {
        // 使用formData
        const formData = new FormData();
        formData.append("photo", e.target.files[0]);
        axios
          .post("/upload", {
            data: formData,
            headers: {
              "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
            },
            baseURL: "http://localhost:3000",
          })
          .then((res) => {
            console.log(res);
            callback(res);
          });
      };
    },
    itemClick(index) {
      // 对激活的列表进行存储，防止书信丢失
      setSessionStorage('userListIndexActive', index);
      this.isClickIndex = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.personal {
  margin-top: 1rem;
  border-radius: 0.2rem;
  .p-top {
    background: #fff;
    .p-bg {
      position: relative;
      height: 13.2rem;
      cursor: pointer;
      background: no-repeat left top / 100% 100%;
      background-color: #999;
      .upload {
        position: absolute;
        top: 2rem;
        right: 4rem;
        width: 13.9rem;
        height: 3.4rem;
        border: 1px solid #ddd;
        border-radius: 0.3rem;
        color: #d3d3d3;
        text-align: center;
        line-height: 3.4rem;
      }
    }
    .p-msg {
      position: relative;
      height: 12rem;
      padding-left: 21rem;
      .avatar {
        position: absolute;
        bottom: 3rem;
        left: 3rem;
        width: 16.8rem;
        height: 16.8rem;
        cursor: pointer;
        img {
          border-radius: 0.3rem;
          border: 0.5rem solid #fff;
          width: 100%;
          height: 100%;
        }
        &:hover .modal {
          opacity: 1;
        }
        .modal {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          padding-top: 3rem;
          transition: all 0.3s linear;
          color: #fff;
          text-align: center;
          opacity: 0;
          background: rgba(0, 0, 0, 0.2);
          .camera {
            font-size: 5rem;
          }
          p {
            margin-top: 1.5rem;
          }
        }
      }
      .msg {
        padding-top: 1rem;
        height: 4rem;
        .username {
          font-size: 2.8rem;
          font-weight: bold;
          color: #000;
        }
      }
      .data-msg {
        display: flex;
        justify-content: space-between;
        margin-top: 2rem;
        color: rgb(133, 144, 166);
        .check-msg {
          cursor: pointer;
        }
        .edit-btn {
          width: 11.8rem;
          height: 3.4rem;
          margin-right: 2rem;
          text-align: center;
          line-height: 3.4rem;
          border-radius: 0.3rem;
          color: #0084ff;
          border: 1px solid #0084ff;
        }
      }
    }
  }
  .person-detail {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    .left {
      // height: 40rem;
      width: 69.4rem;
      background: #fff;
      .head-list-person {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #eee;
        button {
          padding: 1.5rem 0;
          margin: 0 1.1rem;
          cursor: pointer;
          &:not(.active):hover {
            color: #175199;
          }
        }
        .person-active {
          position: relative;
          color: #000;
          font-weight: bold;
        }
        .person-active::after {
          content: "";
          position: absolute;
          top: 4.6rem;
          left: 0;
          right: 0;
          height: 0.2rem;
          width: 3.5rem;
          margin: 0 auto;
          background: #0084ff;
        }
      }
    }
    .right {
      width: 29.6rem;
      .create-center {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 5.6rem;
        background: #fff;
        padding: 0 1rem;
        .item {
          display: flex;
          align-items: center;
          height: 5rem;
          line-height: 5rem;
          color: #8590a6;
          img {
            width: 9rem;
            height: 5rem;
          }
          span {
            font-weight: bold;
            color: #000;
          }
          a {
            font-weight: bold;
            color: rgb(0, 132, 255);
          }
        }
      }
      .foucs-person {
        display: flex;
        height: 8.5rem;
        margin-top: 1rem;
        background: #fff;
        justify-content: space-between;
        .foucs-item {
          border-right: 1px solid #eee;
          text-align: center;
          width: 50%;
          padding: 2.7rem;
          .focused {
            color: #8590a6;
          }
          .foucs-count {
            margin-top: 0.7rem;
            font-weight: bold;
            font-size: 1.9rem;
          }
        }
        .foucs-item:last-of-type {
          border: none;
        }
      }
      .focus-details {
        margin-top: 2rem;
        .item {
          display: flex;
          justify-content: space-between;
          height: 4.7rem;
          line-height: 4.7rem;
          border-top: 1px solid #eee;
          border-bottom: 0.5px solid #eee;
          cursor: pointer;
          &:hover {
            color: #175199;
          }
          .times {
            color: #8590a6;
          }
        }
      }
    }
  }
}
</style>